<script setup>
import { ref /* , computed, watch, onBeforeUpdate */ } from 'vue'
import { useMusicCell } from '@/composables/musicCell.js'
const musicCell = useMusicCell()

const showMore = ref(false)
// 显示更多操作
const showMoreMode = () => {
  showMore.value = true
}
// {
//   name: '歌名', // NAME
//   singer: '歌手', // ARTIST
//   img: 'http://p2.music.126.net/4yI-ClgZGIGaHisOWwJFXg==/5931865232257374.jpg',
// ?param=130y130  hts_MVPIC  cover
//   rid: 1,
//   msg: '陈奕迅'
// }
// 接收数据
const musicInfo = ref()
const initInfo = (obj) => {
  musicInfo.value = obj
}
// 下一首播放
const onAddMusic = () => {
  musicCell.addMusic(musicInfo.value, 0)
}
// 收藏
const onAddLike = () => {
  musicCell.addLike(musicInfo.value, [0])
}
// 下载
const onDownloadFile = () => {
  musicCell.downloadFile(musicInfo.value)
}

// 添加到歌单
const playModelRef = ref(null)
const onShowAddPlay = () => {
  // showPlayList.value = true
  playModelRef.value.onShowPlayModal([musicInfo.value])
}

// 分享
// const onShare = () => {
// musicCell.shareMusic(musicInfo.value)
// }
const showShare = ref(false)
const options = [
  { name: '微信', icon: 'wechat' },
  { name: 'QQ', icon: 'qq' },
  { name: '复制链接', icon: 'link' }
]

const onSelect = async (option) => {
  showToast(option.name)
  const music = await musicCell.getMusic(musicInfo.value)
  musicCell.copyToClipboard(music.audio_url)
  switch (option.name) {
    case '微信':
      plus.runtime.launchApplication({ pname: 'com.tencent.mm' }, function (e) {
        alert('Open system default browser failed: ' + e.message)
      })
      break
    case 'QQ':
      plus.runtime.launchApplication(
        { pname: 'com.tencent.mobileqq' },
        function (e) {
          alert('Open system default browser failed: ' + e.message)
        }
      )
      break
  }
  showShare.value = false
}

const onClose = () => {
  if (!playModelRef.value.isScroll) {
    showMore.value = false
  } else {
    playModelRef.value.onShowPlayModal()
  }
}

// 导出
defineExpose({
  showMoreMode,
  initInfo
})
</script>
<template>
  <van-popup
    :close-on-click-overlay="false"
    @click-overlay="onClose()"
    v-model:show="showMore"
    round
    position="bottom"
    :safe-area-inset-bottom="true"
    :style="{
      height: '40%',
      backgroundColor: 'var(--common-background-color)'
    }"
    z-index="998"
  >
    <!-- 歌曲信息 -->
    <van-cell size="large" center>
      <template #title>
        <span>{{ musicInfo.name || musicInfo.NAME }}</span>
      </template>
      <template #label>
        <span>
          {{ musicInfo.singer || musicInfo.ARTIST }}
        </span>
      </template>
      <template #icon>
        <div class="cell-right">
          <img
            :src="musicInfo.cover || musicInfo.hts_MVPIC || musicInfo.img"
            alt=""
          />
        </div>
      </template>
    </van-cell>
    <!-- 操作区 -->
    <div class="more-mode-grid">
      <van-grid :gutter="10" icon-size="22px" clickable :border="false" square>
        <!-- <van-grid-item
          @click.stop="onAddMusic()"
          icon-prefix="my-icon"
          icon="addNext"
          text="下一首播放"
        /> -->
        <van-grid-item @click.stop="onAddLike()" icon="star-o" text="收藏" />
        <van-grid-item
          @click.stop="onShowAddPlay()"
          icon-prefix="my-icon"
          icon="add"
          text="加到歌单"
        />
        <van-grid-item
          @click.stop="onDownloadFile()"
          icon-prefix="my-icon"
          icon="download"
          text="下载"
        />

        <van-grid-item
          @click.stop="showShare = true"
          icon="share-o"
          text="分享"
        />
      </van-grid>
      <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </van-popup>
  <!-- 加到歌单 -->
  <PlayModel ref="playModelRef"></PlayModel>
</template>
<style scoped>
/* 右侧图片 */
.cell-right {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border: 1.5px solid #f7f7f7;
}
.cell-right img {
  max-width: 100%; /* 图片最大宽度不超过容器宽度 */
  max-height: 100%; /* 图片最大高度不超过容器高度 */
}
/* 宫格 */
.more-mode-grid {
  height: 65px;
  margin: 10px 0px;
}

::v-deep .van-grid-item__content--center {
  border-radius: 25%;
}
</style>
